/*
 * @Author: jiayu
 * @Date: 2022-08-04 16:12:56
 * @LastEditors: jiayu
 * @LastEditTime: 2023-11-07 17:01:42
 * @Description:
 */
import Card from '@/components/Card';
import { Bar } from '@ant-design/plots';
import { Button, Popover } from 'antd';
import { Dispatch, memo, SetStateAction, useEffect, useState } from 'react';
import styles from './index.less';

import { FullscreenOutlined, FullscreenExitOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import React from 'react';
import { useModel } from '@umijs/max';
import { instance } from '@/services/jy-api/api';
import { useOrganizationalStore } from '';

const RightContentRender: React.FC<ChartSctionProps> = (props) => {
  const { isModal, full, fullHandle } = props
  const click = () => {
    if (isModal) {
      full && full(false)
    } else {
      fullHandle && fullHandle('section1')
      full && full(true)
    }
  }
  return <div className={styles.rightToolBar}>
    <Button icon={isModal ? <FullscreenExitOutlined /> : <FullscreenOutlined />} onClick={click}></Button>
  </div>
}

export interface ChartSctionProps {
  isModal?: boolean,
  full?: Dispatch<SetStateAction<boolean>>
  fullHandle?: (val: string) => void
}

const Index: React.FC<ChartSctionProps> = memo((props) => {
  const [config, setConfig] = useState<any>()
  const [rankList, setRankList] = useState<any[]>([])
  const { currentDepartmentId } = useModel('organizational')
  useEffect(() => {
    if (currentDepartmentId) {
      // getData()
    }
  }, [currentDepartmentId]);

  const data = [
    {
      year: '1951 年',
      value: 38,
    },
    {
      year: '1952 年',
      value: 52,
    },
    {
      year: '1956 年',
      value: 61,
    },
    {
      year: '1957 年',
      value: 145,
    },
    {
      year: '1958 年',
      value: 48,
    },
  ];

  return (
    <div className={styles.section} id="section6">
      <Card TitleRnder={'平均学习时长排名'} RightContentRender={<RightContentRender {...props} />}>
        {
          config && <Bar height={300} {...config} />
        }
      </Card>
    </div>
  );
});

export default Index;

